<template>
  <div id="data-view">
    <dv-full-screen-container>
      <top-header />

      <div class="main-content">
        <!-- <digital-flop /> -->

        <div class="block-left-right-content">
          <ranking-board />

          <div class="block-top-bottom-content">
            <div class="block-top-content">
              <!-- <rose-chart />

              <water-level-chart /> -->
              <map-chart></map-chart>

              <scroll-board />
            </div>

            <cards />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from "./topHeader";
import digitalFlop from "./digitalFlop";
import rankingBoard from "./rankingBoard";
import roseChart from "./roseChart";
import waterLevelChart from "./waterLevelChart";
import scrollBoard from "./scrollBoard";
import cards from "./cards";
import worldjson from "./worldgeo.json";
import MapChart from './mapchart.vue';

export default {
  name: "DataView",
  components: {
    topHeader,
    digitalFlop,
    rankingBoard,
    roseChart,
    waterLevelChart,
    scrollBoard,
    cards,
    MapChart
  },
  data() {
    return {};
  },
  methods: {
    initData() {
      //worldjson:世界地图json ，循环获取世界地图所有国家名称
      var crrty = [];
      for (var i = 0; i < worldjson.features.length; i++) {
        crrty.push(worldjson.features[i].properties.name);
      }
      var feizhouguojia = [
        { zh: "安巴尔省", en: "anbar" },
        { zh: "杜胡克省", en: "dohuk" },
        { zh: "巴士拉省", en: "basra" },
        { zh: "济加尔省", en: "dhiqar" },
        { zh: "穆萨纳省", en: "muthanna" },
        { zh: "迪亚拉省", en: "diyala" },
        { zh: "卡迪西亚省", en: "qadisiya" },
        { zh: "埃尔比勒省", en: "arbil" },
        { zh: "纳杰夫省", en: "najaf" },
        { zh: "卡尔巴拉省", en: "karbala" },
        { zh: "苏莱曼尼亚省", en: "sulaymaniya" },
        { zh: "米桑省", en: "misan" },
        { zh: "塔米姆省", en: "Iraq" },
        { zh: "尼尼微省", en: "neineva" },
        { zh: "巴比伦省", en: "babil" },
        { zh: "萨拉赫丁省", en: "salahuddin" },
        { zh: "巴格达省", en: "baghdad" },
        { zh: "瓦西特省", en: "wasit" },
      ];
      //循环匹配，记录下标
      var carryindex = [];
      for (var i = 0; i < crrty.length; i++) {
        for (var j = 0; j < feizhouguojia.length; j++) {
          if (feizhouguojia[j].en == crrty[i]) {
            var derre = {};
            derre.index = i;
            derre.name = crrty[i];
            carryindex.push(derre);
            break;
          }
        }
      }
      //组装非洲国家json坐标数据结构
      var dataf = {
        type: "FeatureCollection",
        crs: {
          type: "name",
          properties: {
            name: "urn:ogc:def:crs:OGC:1.3:CRS84",
          },
        },
        features: [],
      };
      //开始组装非洲国家json坐标数据
      for (var i = 0; i < carryindex.length; i++) {
        if (carryindex.name != "")
          dataf.features.push(worldjson.features[carryindex[i].index]);
      }
      //打印后保存到文件中
      console.log("非洲国家json");
      console.log(dataf);
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="less">
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url("./img/bg.png");
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}
</style>
